<template>
  <view>
    <view class="search-box">
      <!-- cancel-button: 控制取消按钮的显示和隐藏-->
      <!--  自动获取焦点 ： :focus="true" -->
      <uni-search-bar radius="100" :focus="true" @input="input()" cancel-button="none">
      </uni-search-bar>
    </view>

    <!-- 搜索建议区域 -->
    <view class="sugg-list" v-if="searchList.length!==0">
      <view class="sugg-item" v-for="(item,i) in searchList" :key="i" @click="gotoGoodList()">
        <view class="good-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>

    <!-- 搜索历史区域 -->
    <view class="history" v-else>
      <!-- 搜素标题区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="20" @click="clearhistory"></uni-icons>
      </view>
      <!-- 搜索历史列表区域 -->
      <view class="history-list">
        <uni-tag v-for="(item,i) in historys" :key="i" :text="item"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // //  延时器的timerID
        // timer: null,
        kw: ' ',
        searchList: [],
        wh: 0,
        histories: [],
      };
    },
    onLoad(e) {
      this.wh = uni.getSystemInfoSync().windowHeight - 36
      this.histories = JSON.parse(uni.getStorageSync('kw') || '[]')
    },
    methods: {
      input(e) {
        /*
        当第一次触发点击事件时。
        ①清空的是一个空的定时器  ② 创建一个新的定时器，如果500ms后执行逻辑代码 。如果在此期间重新触发了点击事件。则重新进入事件处理函数中，先清除上一次的定时器，在创建一个新的定时器，如果500ms内又触发了input事件，会再次清除当前的定时器。500ms内没有清除当前的定时器（没有发生input事件），则进入逻辑代码区，将此次输入的内容作为搜索关键词
        
        
        */
        // 清除抖动

        // 2、 清除 timer 对应的延时器
        clearTimeout(this.timer)
        // 1. 把逻辑代码装入定时器中，设置延迟时间
        // 如果 500ms内没有触发新的input事件，则为搜索关键词
        this.timer = setTimeout(() => {
          this.kw = e
          this.getSearchList()
        }, 500)
      },
      //  抽离防抖函数
      // debonce( fn, time) {
      //   this.timer = null
      //   return function(){  //  真正的事件处理函数： this(事件触发者 input)
      //     clearTimeout(this.timer)
      //     this.timer = setTimeout(() => {
      //       fn.call(e) //  将内层
      //     }, time)
      //   }
      // }
      async getSearchList() {
        //  判断搜索关键词是否为空
        if (this.kw.trim() === '') {
          this.searchList = []
          return
        }
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: this.kw.trim()
        })
        this.searchList = res.message
        this.savehistory()
        console.log(this.searchList);
        // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
        uni.setStorageSync('kw', JSON.stringify(this.histories))

      },
      savehistory() {
        // 关键词去重
        var set = new Set(this.histories)
        set.delete(this.kw.trim())
        set.add(this.kw.trim())
        this.histories = Array.from(set)
      },
      // 清空搜索历史记录
      clearhistory() {
        // 清空 data 中保存的搜索历史
        this.histories = []
        // 清空本地存储中记录的搜索历史
        uni.setStorageSync('kw', '[]')
      },
      gotoGoodList() {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?=' + this.kw
        })
      }

    },
    computed: {
      historys() {
        // 反转
        return [...this.histories].reverse()

      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    padding: 0 5px;

    .sugg-item {
      padding: 13px 0;
      //  内容在x方向上 贴着左和右
      justify-content: space-between;
      // line-height: 50px;
      display: flex;
      font-size: 13px;
      //  子类在y方向上居中
      align-items: center;
      border-bottom: 1px solid #efefef;

      .good-name {

        // 文字不允许换行
        white-space: nowrap;
        // 溢出内容隐藏
        overflow: hidden;
        // 超出的文本内容 ... 显示
        text-overflow: ellipsis;
        margin-right: 5px;
      }
    }
  }

  .history {
    padding: 0 5px;

    .history-title {
      height: 40px;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #efefef;
    }

    .history-list {
      display: flex;
      padding: 10px 0;
      flex-wrap: wrap;
      justify-content: start;
      justify-items: right;

      .uni-tag {
        //  是子元素不发生重叠
        display: inline-block;
        margin-bottom: 10px;
        color: #000;
        margin-bottom: 5px;
        margin-right: 2px;
        background-color: rgba(0, 0, 0, .1);
      }
    }
  }
</style>